<template>
  <div class="after-data table-theme">
    <head-title title="数据-售后数据"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <tabs-view
            :list="timeList"
            :tabsIndex="time"
            @roleType="timeSelect"
          ></tabs-view>
          <el-date-picker
            v-if="time === 0"
            v-model="dayValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="init"
          >
          </el-date-picker>
          <el-date-picker
            v-if="time === 1"
            v-model="monthValue"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            @change="init"
          >
          </el-date-picker>
          <el-date-picker
            v-if="time === 2"
            v-model="dayValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="init()"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-date-picker
            v-if="time === 3"
            v-model="dayValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="init()"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
            v-if="time === 0 || time === 1 || time === 3"
          ></search-view>
          <div class="add">
            <el-button type="primary" @click="onExport">导出</el-button>
          </div>
        </div>
      </div>
      <p style="height: 30px"></p>
      <el-table :data="list" v-if="time === 0">
        <el-table-column
          label="日期"
          align="center"
          prop="date"
          key="date0"
        ></el-table-column>
        <el-table-column
          label="售后订单数"
          align="center"
          prop="after_order_count"
          key="after_order_count0"
        ></el-table-column>
        <el-table-column
          label="售后产品数"
          align="center"
          prop="after_order_goods_count"
          key="after_order_goods_count0"
        >
        </el-table-column>
        <el-table-column
          label="订单总数"
          align="center"
          prop="order_count"
          key="order_count0"
        ></el-table-column>
        <el-table-column
          label="订单商品总数"
          align="center"
          prop="order_goods_count"
          key="order_goods_count0"
        ></el-table-column>
        <el-table-column
          label="售后订单占比"
          align="center"
          key="after_order_rate0"
        >
          <template slot-scope="scope">
            {{ scope.row.after_order_rate }}%
          </template>
        </el-table-column>
        <el-table-column
          label="售后产品占比"
          align="center"
          key="after_order_goods_rate0"
        >
          <template slot-scope="scope">
            {{ scope.row.after_order_goods_rate }}%
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="list" v-if="time === 1">
        <el-table-column
          label="日期"
          align="center"
          prop="date"
          key="date1"
        ></el-table-column>
        <el-table-column
          label="售后订单数"
          align="center"
          prop="after_order_count"
          key="after_order_count1"
        ></el-table-column>
        <el-table-column
          label="售后产品数"
          align="center"
          prop="after_order_goods_count"
          key="after_order_goods_count1"
        >
        </el-table-column>
        <el-table-column
          label="订单总数"
          align="center"
          prop="order_count"
          key="order_count1"
        ></el-table-column>
        <el-table-column
          label="订单商品总数"
          align="center"
          prop="order_goods_count"
          key="order_goods_count1"
        ></el-table-column>
        <el-table-column label="售后订单占比" align="center" key="after_order_rate1">
          <template slot-scope="scope">
            {{ scope.row.after_order_rate }}%
          </template>
        </el-table-column>
        <el-table-column label="售后产品占比" align="center" key="after_order_goods_rate1">
          <template slot-scope="scope">
            {{ scope.row.after_order_goods_rate }}%
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="afterList" v-if="time === 2">
        <el-table-column
          label="店铺id"
          align="center"
          prop="store_id"
          key="store_id2"
        ></el-table-column>
        <el-table-column
          label="店铺名称"
          align="center"
          prop="store_name"
          key="store_name2"
        ></el-table-column>
        <el-table-column
          label="售后订单数"
          align="center"
          prop="after_order_count"
          key="after_order_count2"
        ></el-table-column>
        <el-table-column
          label="售后产品数"
          align="center"
          prop="after_order_goods_count"
          key="after_order_goods_count2"
        >
        </el-table-column>
        <el-table-column
          label="订单总数"
          align="center"
          prop="order_count"
          key="order_count2"
        ></el-table-column>
        <el-table-column
          label="订单商品总数"
          align="center"
          prop="order_goods_count"
          key="order_goods_count2"
        ></el-table-column>
        <el-table-column label="售后订单占比" align="center" key="after_order_rate2">
          <template slot-scope="scope">
            {{ scope.row.after_order_rate }}%
          </template>
        </el-table-column>
        <el-table-column label="售后产品占比" align="center" key="after_order_goods_rate2">
          <template slot-scope="scope">
            {{ scope.row.after_order_goods_rate }}%
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" v-if="time === 2">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="limit"
          @current-change="init2"
          :current-page="page"
        ></el-pagination>
      </div>
      <el-table :data="afterGoodsList" v-if="time === 3">
        <el-table-column
          label="商品ID"
          align="center"
          prop="goods_id"
          key="goods_id3"
        ></el-table-column>
        <el-table-column
          label="工厂名称"
          align="center"
          prop="factory_name"
          key="factory_name3"
        ></el-table-column>
        <el-table-column
          label="工厂ID"
          align="center"
          prop="factory_id"
          key="factory_id3"
        ></el-table-column>
        <el-table-column
          label="工厂编号"
          align="center"
          prop="factory_sn"
          key="factory_sn3"
        ></el-table-column>
        <el-table-column
          label="售后订单数"
          align="center"
          prop="after_order_count"
          key="after_order_count3"
        ></el-table-column>
        <el-table-column
          label="售后产品数"
          align="center"
          prop="after_order_goods_count"
          key="after_order_goods_count3"
        >
        </el-table-column>
        <el-table-column
          label="订单总数"
          align="center"
          prop="order_count"
          key="order_count3"
        ></el-table-column>
        <el-table-column
          label="订单商品总数"
          align="center"
          prop="order_goods_count"
          key="order_goods_count3"
        ></el-table-column>
        <el-table-column label="售后订单占比" align="center" key="after_order_rate3">
          <template slot-scope="scope">
            {{ scope.row.after_order_rate }}%
          </template>
        </el-table-column>
        <el-table-column label="售后产品占比" align="center" key="after_order_goods_rate3">
          <template slot-scope="scope">
            {{ scope.row.after_order_goods_rate }}%
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" v-if="time === 3">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="limit"
          @current-change="init3"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import TabsView from "@/components/TabsView";
export default {
  name: "after_data",
  components: {
    TabsView,
  },
  data() {
    return {
      timeList: ["日汇总", "月汇总", "售后排行榜", "售后商品排行榜"],
      time: 0,
      dayValue: "",
      monthValue: "",
      page: 1,
      list: [],
      afterList: [],
      total: 0,
      limit: 30,
      optionList: [
        {
          value: 0,
          label: "店铺ID",
        },
        {
          value: 1,
          label: "店铺名称",
        },
        {
          value: 2,
          label: "工厂ID",
        },
        {
          value: 3,
          label: "工厂名称",
        },
      ],
      selectContent: "",
      classSelect: "",
      afterGoodsList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    timeSelect(value) {
      this.time = value;

      if (value == 0 || value == 1) {
        this.optionList = [
          {
            value: 0,
            label: "店铺ID",
          },
          {
            value: 1,
            label: "店铺名称",
          },
          {
            value: 2,
            label: "工厂ID",
          },
          {
            value: 3,
            label: "工厂名称",
          },
        ];
        this.$forceUpdate();
      } else if (value == 3) {
        this.optionList = [
          {
            value: 0,
            label: "商品ID",
          },
          {
            value: 1,
            label: "工厂ID",
          },
        ];
        this.$forceUpdate();
      }
      (this.selectContent = ""), (this.classSelect = ""), (this.list = []);
      this.dayValue = "";
      this.monthValue = "";
      this.init();
    },
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
      };
      if (this.time === 0 || this.time === 1) {
        if (this.classSelect == 0 && this.selectContent !== "") {
          data.store_id = this.selectContent;
        } else if (this.classSelect == 1 && this.selectContent !== "") {
          data.store_name = this.selectContent;
        } else if (this.classSelect == 2 && this.selectContent !== "") {
          data.factory_id = this.selectContent;
        } else if (this.classSelect == 3 && this.selectContent !== "") {
          data.factory_name = this.selectContent;
        }
      } else if (this.time === 3) {
        if (this.classSelect == 0 && this.selectContent !== "") {
          data.goods_id = this.selectContent;
        } else if (this.classSelect == 1 && this.selectContent !== "") {
          data.factory_id = this.selectContent;
        }
      }
      if (this.time === 0) {
        if (this.dayValue) {
          data.start_time = this.dayValue[0];
          data.end_time = this.dayValue[1];
        }
        this.$http(this.$ApiList.DayAfterList, data).then((res) => {
          this.list = res.datas;
        });
      } else if (this.time === 1) {
        if (this.monthValue) {
          data.start_time = this.monthValue[0];
          data.end_time = this.monthValue[1];
        }
        this.$http(this.$ApiList.MonthAfterList, data).then((res) => {
          this.list = res.datas;
        });
      } else if (this.time === 2) {
        if (this.dayValue) {
          data.start_time = this.dayValue[0];
          data.end_time = this.dayValue[1];
        }
        this.$http(this.$ApiList.AfterRanking, data).then((res) => {
          this.list = res.datas;
          this.total = this.list.length;
          if (this.list.length >= this.limit) {
            this.afterList = this.list.slice(0, this.limit);
          } else {
            this.afterList = this.list.slice(0, this.list.length);
          }
        });
      } else if (this.time === 3) {
        if (this.dayValue) {
          data.start_time = this.dayValue[0];
          data.end_time = this.dayValue[1];
        }
        this.$http(this.$ApiList.AfterGoodsRanking, data).then((res) => {
          this.list = res.datas;
          this.total = this.list.length;
          if (this.list.length >= this.limit) {
            this.afterGoodsList = this.list.slice(0, this.limit);
          } else {
            this.afterGoodsList = this.list.slice(0, this.list.length);
          }
        });
      }
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    init2(e) {
      this.page = e;
      this.afterList = this.list.slice(
        this.limit * (this.page - 1),
        this.limit * this.page
      );
    },
    init3(e) {
      this.page = e;
      this.afterGoodsList = this.list.slice(
        this.limit * (this.page - 1),
        this.limit * this.page
      );
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.dayValue = "";
      this.monthValue = "";
      this.list = [];
      this.selectContent = "";
      this.classSelect = 0;
      this.init();
    },
    goSearch(type, value) {
      this.selectContent = value;
      this.classSelect = type;
      this.init();
    },
    // 导出
    onExport(){
      let start_time = ''
      let end_time = ''
      let url = ''
      switch (this.time){
        case 0:
          if(this.dayValue.length){
            start_time = this.dayValue[0]
            end_time = this.dayValue[1]
          }
          url = `${this.$domain}furniture/Adminexcel/DayAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}`
          if(this.selectContent){
            switch (this.classSelect){
              case 0:
                url = `${this.$domain}furniture/Adminexcel/DayAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&store_id=${this.selectContent}`
                break
              case 1:
                url = `${this.$domain}furniture/Adminexcel/DayAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&store_name=${this.selectContent}`
                break;
              case 2:
                url = `${this.$domain}furniture/Adminexcel/DayAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&factory_id=${this.selectContent}`
                break;
              case 3:
                url = `${this.$domain}furniture/Adminexcel/DayAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&factory_name=${this.selectContent}`
                break;
            }
          }
          window.location.href = url
          break;
        case 1:
          if(this.monthValue.length){
            start_time = this.monthValue[0]
            end_time = this.monthValue[1]
          }
          url = `${this.$domain}furniture/Adminexcel/MonthAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}`
          if(this.selectContent){
            switch (this.classSelect){
              case 0:
                url = `${this.$domain}furniture/Adminexcel/MonthAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&store_id=${this.selectContent}`
                break
              case 1:
                url = `${this.$domain}furniture/Adminexcel/MonthAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&store_name=${this.selectContent}`
                break;
              case 2:
                url = `${this.$domain}furniture/Adminexcel/MonthAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&factory_id=${this.selectContent}`
                break;
              case 3:
                url = `${this.$domain}furniture/Adminexcel/MonthAfterListExcel?secret=888&start_time=${start_time}&end_time=${end_time}&factory_name=${this.selectContent}`
                break;
            }
          }
          window.location.href = url
          break;
        case 2:
          if(this.dayValue.length){
            start_time = this.dayValue[0]
            end_time = this.dayValue[1]
          }
          url = `${this.$domain}furniture/Adminexcel/AfterRankingExcel?secret=888&start_time=${start_time}&end_time=${end_time}`
          window.location.href = url
          break;
        case 3:
          if(this.dayValue.length){
            start_time = this.dayValue[0]
            end_time = this.dayValue[1]
          }
          url = `${this.$domain}furniture/Adminexcel/AfterGoodsRankingExcel?secret=888&start_time=${start_time}&end_time=${end_time}`
          if(this.selectContent){
            switch (this.classSelect){
              case 0:
                url = `${this.$domain}furniture/Adminexcel/AfterGoodsRankingExcel?secret=888&start_time=${start_time}&end_time=${end_time}&goods_id=${this.selectContent}`
                break
              case 1:
                url = `${this.$domain}furniture/Adminexcel/AfterGoodsRankingExcel?secret=888&start_time=${start_time}&end_time=${end_time}&factory_id=${this.selectContent}`
                break;
            }
          }
          window.location.href = url
          break;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.after-data {
  /deep/ .el-range-separator {
    width: 8%;
  }
}
</style>